<template>
	<view class="calendar">
		<u-popup class="popup" v-model="show" mode="bottom">
			<view class="popup-border" :class="{'show':pinde==index}" v-for="(item,index) in listes" :key="index" @tap="popup(index)">{{item.label}}</view>
		</u-popup>
		<p-navbar title="成交记录">
			<image class="calendar-image" src="../../static/shaixuan.png" mode="aspectFill" @tap="show=true"></image>
		</p-navbar>
		<u-calendar v-model="strats" :mode="mode" @change="changestrats"></u-calendar>
		<u-calendar v-model="end" :mode="mode" @change="changeend"></u-calendar>
		<view class="rili">
			<view class="rili-item" @click="strats=true">{{time.strattime || '开始时间'}}
				<image src="../../static/drop.png" />
			</view>
			<view class="">:</view>
			<view class="rili-item" @click="end=true">{{time.end || '结束时间'}}
				<image src="../../static/drop.png" />
			</view>
			<view class="btn" @tap="success">确定</view>
		</view>
		<view class="calendar-title" style="border-top: 1rpx solid #E6E6E6;">
			<view class="calendar-item" style="font-size: 24rpx;" v-for="item in calendar" :key="item">{{item}}</view>
		</view>

		<view class="calendar-title" v-for="(item,index) in calendarlsit" :key="index">
			<view class="calendar-item text color-rise" :class="{'color-fall':item.type=='1'}">{{item.type=='1'?'卖出':item.type=='2'?'加仓':'买入'}}</view>
			<view class="calendar-item text ">{{pinter(item.buyNum,4)}}</view>
			<view class="calendar-item text">{{pinter(item.cashAmount,2)}}</view>
			<view class="calendar-item text">{{pinter(item.buyPrice,4)}}</view>
			<view class="calendar-item texts">
			{{str(item.createTime)}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strats: false, //开始时间
				end: false, //结束时间
				time: {},
				mode: 'date', //时间格式
				show: false,
				listes: [{ //模态框参数
						value: '1',
						label: '买入'
					},
					{
						value: '2',
						label: '卖出'
					}
				],
				calendar: ['操作', '成交量','金额(U)','成交价', '时间'], //标题
				calendarlsit: [], //列表
				type: {}, //参数
				pinde:null,//买入卖出
				page:1,
				typedata:''
			};
		},
		computed: {
			pinter() {
				return (t,flex) => {
					if(!t) return '0.0000'
					let data=this.util.decimal(t)
					if(data=='0.0000'){//shib 这种小币种 都是5位小数点
						return this.util.decimal(t,5)
					}else{
						return data;
					}
				}
			},
			str(){
				return t=>{
					return t.substring(0,15)
				}
			},
		},
		onReachBottom(){
			this.page++
			this.SpotOrderCode(this.typedata)
		},
		onLoad() {
			this.type = JSON.parse(this.$Route.query.type) //获取上页面获取的数据
			this.SpotOrderCode()
		},
		methods: {
			SpotOrderCode(e = '') {
				// &orderCode=${this.type.orderCode}
				this.request(`order/findByStrategySpotOrderCode?pageSize=20&page=${this.page}&symbol=${this.type.symbol}` + e).then(res => {
					this.calendarlsit.push(...res.data.data)
				})
			},
			success() {
				if ((this.time.strattime && !this.time.end) || (!this.time.strattime && this.time.end) || JSON.stringify(this.time)=='{}'){
					this.util.toast('请选择时间');
					return;
				}
				if(new Date(this.time.strattime).getTime()>new Date(this.time.end).getTime()) return this.util.toast('结束时间必须大于开始时间');
				this.calendarlsit=[]
				this.page=1;
				this.datatype('time')
			},
			datatype(e = '') { //判断
				let data = '';
				if(e=='time'){
					let createStartTime = this.time.strattime + ' 00:00:00'
					data += `&createStartTime=${createStartTime}`
					let createEndTime = this.time.end + ' 23:59:59'
					data += `&createEndTime=${createEndTime}`
				}
				if (this.pinde=='0' || this.pinde=='1') {
					data += `&type=${this.pinde}`
					this.typedata=data
				}
				this.SpotOrderCode(data)
			},
			popup(index) {
				this.calendarlsit=[]
				this.page=1;
				this.pinde=index
				this.datatype(index)
				this.show=false
			},
			changestrats(e) { //开始
				this.time.strattime = e.result
			},
			changeend(e) { //结束
				this.time.end = e.result
			}
		}
	}
</script>

<style lang="scss">
	.calendar {
		padding: 0rpx 10rpx 0rpx;
	}

	.calendar-title {
		line-height: 90rpx;
		// margin-top: 15rpx;
		// border-top: 1rpx solid $border;
		border-bottom: 1rpx solid $border;
		@include flex;
		padding: 0rpx 10rpx;

	}

	.calendar-item {
		width: 15%;
		font-size: 25rpx;
		// font-size: 24rpx;
		// border: 1px solid red;
	}
	.calendar-item:nth-child(5) {
		width: 35%;
		text-align: right;
		font-size: 24rpx;
	}
	.calendar-item:nth-child(3) {
		width: 15%;
	}
	.calendar-item:nth-child(2) {
		width: 23%;
		text-align: center;
	}
   .calendar-item:nth-child(1) {
		width: 10%;
	}
	.text {
		font-weight: bold;
	}

	.texts {
		color: $color-fu;
		font-weight: bold;
	}

	.calendar-image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 10rpx;
	}

	.popup {
		/deep/ .uni-scroll-view-content {
			width: 100%;
			height: 100%;
			background-color: $color-bgs;
			text-align: center;
			line-height: 80rpx;
			padding: 20rpx 0rpx 0rpx;
		}

		.popup-border {
			border-bottom: 1rpx solid $border;
			
		}
		.show{
			color: $light-color;
		}
	}

	.rili {
		@include flex;
		margin-top: 20rpx;
		justify-content: space-between;
		padding: 0rpx 10rpx;
		margin: 30rpx 0rpx;

		.rili-item {
			padding: 10rpx 30rpx;
			border-radius: 12rpx;
			border: 1rpx solid $border;
		}

		.btn {
			background-color: $light-color;
			padding: 8rpx 20rpx;
			border-radius: 12rpx;
		}

		image {
			margin-left: 20rpx;
			width: 24rpx;
			height: 12rpx;
		}
	}
</style>
